<template>
  <view class="nav-bar">
    <view class="tabs_title">
      <view v-for="(item, index) in list" :key="item.id" class="title_item"
        :class="{ active: index == activeIndex }" @click="handleItemTap(index)">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'nav-bar',
    props: {
      list: {
        type: Array,
        default: []
      },
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {};
    },
    methods: {
      handleItemTap(index) {
        this.$emit('tabsItemChange', index);
        console.log(this.list);
      }
    }
  };
</script>

<style lang="scss">
  .nav-bar {
    .tabs_title {
      display: flex;
    }

    .title_item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      padding: 15upx 0;
    }

    .active {
      color: #eb4450;
      border-bottom: 5upx solid #eb4450;
    }
  }
</style>
